<script lang="ts" setup>
  import type { CourseItem, CourseCup } from '@/types/course';
  import { onMounted, ref } from 'vue';
  import { cloneDeep } from 'lodash';
  import { createCourseCup, updateCourseCup } from '@/api/course';
  import { Form, Message } from '@arco-design/web-vue';

  const emit = defineEmits(['close']);

  const props = defineProps<{
    courseDetail: CourseItem;
    courseCup?: CourseCup;
  }>();

  const saving = ref(false);
  const data = ref<Partial<CourseCup>>({});
  const formRef = ref<InstanceType<typeof Form> | null>(null);

  onMounted(() => {
    if (props.courseCup) {
      data.value = cloneDeep(props.courseCup);
      if (data.value.fieldStyle) {
        data.value.fieldStyles = JSON.parse(data.value.fieldStyle) as string[];
      }
    } else {
      data.value.courseId = props.courseDetail.id as string;
    }
  });

  const handleSubmit = async () => {
    if (formRef.value) {
      const validate = await formRef.value.validate();
      if (!validate) {
        try {
          saving.value = true;
          data.value.fieldStyle = JSON.stringify(data.value.fieldStyles || []);
          if (props.courseCup?.id) {
            await updateCourseCup(data.value);
            Message.success('修改成功');
          } else {
            await createCourseCup(data.value);
            Message.success('添加成功');
          }
          emit('close', true);
        } finally {
          saving.value = false;
        }
      }
    }
  };
</script>

<template>
  <a-modal
    :title="courseCup?.id ? '编辑场地' : '添加场地'"
    :width="500"
    visible
    :ok-loading="saving"
    @cancel="emit('close', false)"
    @before-ok="handleSubmit"
  >
    <a-form ref="formRef" :model="data" layout="vertical">
      <a-form-item
        label="场地名称"
        field="name"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-input v-model="data.name" />
      </a-form-item>

      <a-form-item field="fieldDesigner" label="场地设计师">
        <a-input v-model="data.fieldDesigner" />
      </a-form-item>

      <a-form-item :field="`holeCount`" label="洞数">
        <a-input-number
          v-model="data.holeCount"
          :precision="0"
          :step="1"
          :min="1"
          hide-button
        />
      </a-form-item>

      <a-form-item label="杆数" :field="`parCount`">
        <a-input-number
          v-model="data.parCount"
          :precision="0"
          :step="1"
          :min="1"
          hide-button
        />
      </a-form-item>

      <a-form-item label="长度" :field="`fieldLength`">
        <a-input-number
          v-model="data.fieldLength"
          :precision="0"
          :step="1"
          :min="1"
          hide-button
        >
          <template #suffix>码</template>
        </a-input-number>
      </a-form-item>

      <a-form-item label="场地风格" :field="`fieldStyles`">
        <a-select
          v-model="data.fieldStyles"
          multiple
          allow-create
          :options="[
            '林克斯球场',
            '山地球场',
            '平原球场',
            '森林球场',
            '滨海球场',
            '何川球场',
            '丘陵球场',
            '沙漠球场',
          ]"
          placeholder="选择风格/输入风格"
        >
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
